<template>
  <card-component :content-title="contentTitle"

                  :page="page"
                  @handleSizeChange="handleSizeChange"
                  @handleCurrentChange="handleCurrentChange">

    <table-component slot="table"
                     :table-header="tableHeader"
                     :table-data="tableData"
                     :expand="false"
                     @handleEdit="handleEdit"
                     @handleDelete="handleDelete"></table-component>

  </card-component>

</template>

<script>



  import card from '@/base/card.vue'
  import table from '@/base/AutoWidthTable.vue'
  import request from '@/common/js/request'

  export default {
    name: "spelic-content-component",
    data() {
      return {
        contentTitle: this.$getTextByLangKey('规格库'),
        tableHeader: [],
        tableData: [],
        page: {
          currentPage: 1,
          total: 0,
          pageSize: 20,
        },
      }
    },
    created: function () {

      this.fetchData()
    },

    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    },

    methods: {

      getTimeToDate: function (time) {

        if (time != null) {
          var date = new Date(time).format("yyyy/MM/dd hh:mm")
          return date
        }
        return ''
      },

      fetchData: function () {
        var clientid = this.$route.query.clientid
        var clientname = this.$route.query.clientname
        this.contentTitle = this.$getTextByLangKey('客户')+clientname+ this.$getTextByLangKey('规格库')
        request.requestSpeclibList(clientid,this.page.currentPage,20,res=>{
//          var header = [{type: "index", isShow: true}, {prop: 'bomname', label: '名称', isShow: true}]
//          var tableData = []
//          res.data.data.forEach(function (item) {
//            // console.log(item)
//            let c = {bomname: item}
//            tableData.push(c)
//          })

          console.log(res)
          this.tableHeader = this.makeHeader(res.data.data.header)
          this.tableData = this.makeList(res.data.data.list)

//          this.page.currentPage = res.data.data.pageNum
          this.page.total = res.data.data.total
          this.page.pageSize = res.data.data.pageSize

        })

      },

      makeHeader: function (list) {


        let expandItem = {
          type: 'expand', isShow: true,
        }
        let indexItem = {
          type: 'index', isShow: true,
          width: '65', label: 'NO.',
        }

        let actionItem = {type: "action", label: this.$getTextByLangKey('操作'), isShow: true}
//        let selectionItem = {
//          type: 'selection', isShow: true
//        }
        var header = [expandItem,indexItem]
        list.forEach(function (item) {
          if(item.label === this.$getTextByLangKey('编码')){
            item.isShow = false
          }else{
            item.isShow = true
          }
          header.push(item)
        }, this)

//        header.push(actionItem)
        return header
      },

      makeList:function (list) {
        list.forEach(item => {
          item.created = this.getTimeToDate(item.created)
          item.updated = this.getTimeToDate(item.updated)
//          item.codes = ' hell o code'
          item.expandList = []

          item.codes.forEach((code,index)=>{
            let expand = [{label:this.$getTextByLangKey('编码')+(index+1),value:code.code},
              {label: this.$getTextByLangKey('开始位置'),value:code.startPosi},
              {label: this.$getTextByLangKey('结束位置'),value:code.endPosi}]
            item.expandList.push(expand)
          })



        })
        return list
      },

      handleEdit: function (index, row) {
        this.$emit('handleEdit', index, row)
      },
      handleDelete: function (index, row) {
        this.$emit('handleDelete', index, row)
      },
      rowClick: function (row, event, column) {
      },
      handleSizeChange: function (val) {
        this.$emit("handleSizeChange", val)
      },

      handleCurrentChange: function (val) {
        this.page.currentPage = val
        this.fetchData()
      },
    },
    components: {
      'table-component': table,
      'card-component': card,
    },

  }
</script>




<style scoped>
  .el-card {
    box-shadow: 0 0;
    border-radius: 0;
    border:none;
  }
</style>


